<template>
	<div style="padding:0px;">
		<el-form :model="dialogForm"  ref="dialogForm" :label-width="formLabelWidth" :rules="rules">
			<el-tabs v-model="activeName" type="card" >
				<el-tab-pane label="图片信息" name="1">
			    	<el-form-item label="上游购销合同"  class="is-required">
			    	  <!-- qiniuImage:七牛图片对象  packJson:上传张数大小等参数配置  id:七牛组件id canDelete:是否可操作删除图片 -->
			    	  <qiniu :qiniuImage="qiniuImage"  :packJson="packJson" :id="qiniuImage.id" :canDelete="dialogSendData.isAdd"></qiniu>
				    </el-form-item>
				    <el-form-item label="定金凭证"  >
				      <qiniu  :qiniuImage="qiniuImage1"  :packJson="packJson" :id="qiniuImage1.id" :canDelete="dialogSendData.isAdd"></qiniu>
				    </el-form-item>
				    <el-form-item label="供应商收款账号"  >
				      <qiniu  :qiniuImage="qiniuImage2"  :packJson="packJson1" :id="qiniuImage2.id" :canDelete="dialogSendData.isAdd"></qiniu>
				    </el-form-item>
				    <el-form-item label="提车地址及联系人"  >
				      <qiniu  :qiniuImage="qiniuImage3"  :packJson="packJson1" :id="qiniuImage3.id" :canDelete="dialogSendData.isAdd"></qiniu>
				    </el-form-item>
			    </el-tab-pane> 
			    <el-tab-pane label="基本信息" name="2">
			    	<brandSelect   :pinpaiId="dialogForm.carBrandId" :zipinpaiId="dialogForm.carSubBrandId" :chexiId="dialogForm.carSeriesId" :chexingId="dialogForm.carTypeId" :isDisabled="!dialogSendData.isAdd" v-on:receive-brand-data="receiveBrandData" :formLabelWidth="formLabelWidth" :carOrderId="carOrderId"></brandSelect>
				    <el-form-item label="汽车车规"   >
				      <el-input  v-model="dialogForm.specificationName" auto-complete="off" disabled ></el-input>
				    </el-form-item>
				    <el-form-item label="汽车数量"  class="half" prop="amount">
				      <el-input  type="tel" :maxlength="9" v-model.number="dialogForm.amount" auto-complete="off" :disabled="!dialogSendData.isAdd" ></el-input>
				    </el-form-item>
				    <el-form-item label="汽车颜色"  class="half" prop="color">
				      <el-input :maxlength="10" v-model="dialogForm.color" auto-complete="off" :disabled="!dialogSendData.isAdd" ></el-input>
				    </el-form-item>
				    <el-form-item label="指导价/配置"  prop="carConfig">
				      <el-input  type="textarea" :rows=3 v-model="dialogForm.carConfig" auto-complete="off" :disabled="!dialogSendData.isAdd" :maxlength="100"></el-input>
				    </el-form-item>
				    <el-form-item   label="购车总价格"   prop="totalPrice" class="currency">
				    	<el-input   v-model="dialogForm.totalPrice" @blur="FormatTwo('totalPrice')" :maxlength="11"  auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input> 
				    	<span class="convertCurrency">{{dialogForm.totalPrice|convertCurrency}}</span>
				    </el-form-item>
				    <el-form-item label="垫资金额"   prop="paymentAmount" class="currency">
				    	<el-input   v-model="dialogForm.paymentAmount" @blur="FormatTwo('paymentAmount')" :maxlength="11" auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input>
				    	<span class="convertCurrency">{{dialogForm.paymentAmount|convertCurrency}}</span>
				    </el-form-item>
				    <el-form-item label="定金金额"   prop="earnest" class="currency">
				    	<el-input  v-model="dialogForm.earnest" @blur="FormatTwo('earnest')"  :maxlength="11" auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input>
				    	<span class="convertCurrency">{{dialogForm.earnest|convertCurrency}}</span>
				    </el-form-item>
				    <el-form-item label="保证金金额"   prop="deposit" class="currency">
				    	<el-input  :value="(((this.dialogForm.totalPrice-0) - (this.dialogForm.paymentAmount-0) - (this.dialogForm.earnest-0))||0).toFixed(2)"  disabled></el-input>
				    	<span class="convertCurrency">{{((this.dialogForm.totalPrice-0) - (this.dialogForm.paymentAmount-0) - (this.dialogForm.earnest-0)).toFixed(2)|convertCurrency}}</span>
				    </el-form-item>
				    <el-form-item label="垫资比例"  class="half" >
				    	<el-input type="text" :value="((((dialogForm.paymentAmount-0)/(dialogForm.totalPrice-0)*100-0)||0).toFixed(2)||'')+'%'"  auto-complete="off" disabled class="colorRed"></el-input>
				    </el-form-item>
				    <el-form-item label="当前利率"  class="half" prop="interestRate">	
				      <el-input  type="text" v-model="dialogForm.interestRate"  @blur="FormatInterestRate('interestRate')" auto-complete="off"  :maxlength=8 :disabled="!dialogSendData.isAdd" ></el-input>	
				    </el-form-item>
				    <el-form-item label="借款时长"  prop="durationId"> 
				    	<el-select  
		                    	v-model="dialogForm.durationId" 
		                    	placeholder="请选择借款时长"
		                        :disabled="!dialogSendData.isAdd"      
		                    	>
		                    <el-option  label="请选择借款时长" value="" > </el-option> 	
                            <el-option    
                                v-for="(item,index) in dialogForm.carOrderDurationList"  
                                :label="item.description"  
                                :value="item.id"   
                                :key="index"
                                >  
                            </el-option>
					    </el-select> 
				    </el-form-item>
			    </el-tab-pane>
			    <el-tab-pane label="上游购销信息" name="3">
				  	<el-form-item label="提车省"  prop="supplierCityPid"> 
				      
					     <el-select 
		                    	v-model.number="dialogForm.supplierCityPid" 
		                    	placeholder="请选择提车省"  
		                    	:disabled="!dialogSendData.isAdd" 
		                    	v-on:change="getCity()"
		                    	>
                           <el-option  label="请选择提车省" value="" > </el-option> 	
					       <el-option    
                                v-for="(item,index) in selectProvince"  
                                :key="item.index"
                                :label="item.name"  
                                :value="item.nid"  
                                
                                >  
	                       </el-option>  
					    </el-select> 
					    
				    </el-form-item>
				  	<el-form-item label="提车市"  prop="supplierCityNid">  
					     <el-select 
		                    	v-model.number="dialogForm.supplierCityNid" 
		                    	placeholder="请选择提车市"  
		                    	:disabled="!dialogSendData.isAdd" 
		                    	>

					       <el-option    
                                v-for="(item,index) in selectCity"  
                                :key="item.index"
                                :label="item.name"  
                                :value="item.nid" 
                                >  
	                       </el-option>  
					    </el-select>  
				    </el-form-item>

				    <el-form-item label="提车具体地址"  prop="supplierAddress">
				      <el-input  :maxlength="30" v-model="dialogForm.supplierAddress" auto-complete="off" :disabled="!dialogSendData.isAdd" ></el-input>
				    </el-form-item>
				  	<el-form-item label="提车联系人"  ><!-- prop="supplierPerson" -->
				      <el-input  :maxlength="20"  v-model="dialogForm.supplierPerson" auto-complete="off" :disabled="!dialogSendData.isAdd" ></el-input>
				    </el-form-item>
				    <el-form-item label="联系人手机号"  prop="supplierPhone">
				      <el-input  :maxlength="11" v-model="dialogForm.supplierPhone" auto-complete="off" :disabled="!dialogSendData.isAdd" ></el-input>
				    </el-form-item>
				    <el-form-item label="收款帐户名1"  prop="accountName">
				      <el-input  :maxlength="30" v-model="dialogForm.accountName" auto-complete="off" :disabled="!dialogSendData.isAdd" ></el-input>
				    </el-form-item>
				    <el-form-item label="开户行名称1"  prop="openningBank">
				      <el-input  :maxlength="30"  v-model="dialogForm.openningBank" auto-complete="off" :disabled="!dialogSendData.isAdd" ></el-input>
				    </el-form-item>
				    <el-form-item label="收款账号1"  prop="accountNumber">
				      <el-input    v-model="dialogForm.accountNumber" auto-complete="off" :disabled="!dialogSendData.isAdd"  :maxlength="30"></el-input>
				    </el-form-item>
				    <el-form-item label="收款人姓名2"  >
				      <el-input :maxlength="20"   v-model="dialogForm.accountNameBak" auto-complete="off" :disabled="!dialogSendData.isAdd" ></el-input>
				    </el-form-item>
				    <el-form-item label="开户行名称2"  >
				      <el-input :maxlength="30"   v-model="dialogForm.openningBankBak" auto-complete="off" :disabled="!dialogSendData.isAdd" ></el-input>
				    </el-form-item>
				    <el-form-item label="收款账号2"  >
				      <el-input :maxlength="30"   v-model="dialogForm.accountNumberBak" auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input>
				    </el-form-item>
				  	<el-form-item label="打款备注"  ><!-- prop="remark" -->
				      <el-input :maxlength="100"  type="textarea" :rows=3 v-model="dialogForm.remark" auto-complete="off" :disabled="!dialogSendData.isAdd" ></el-input>
				    </el-form-item>
			    </el-tab-pane>
			</el-tabs>
		</el-form>
		<div style="text-align:right;margin-top:15px;">
			 <el-button @click="returnBack">返 回</el-button>
			 <el-button v-if="dialogSendData.isAdd" type="primary" @click="submitConfirmForm('dialogForm')">提 交</el-button>
		</div>
	</div>
</template>
<script  >

    import qiniu from '@/views/qiniu/upload';
    import agentHttp from '@/utils/agentHttp.js';
    import {require,prop,phone,decimalTwo,decimalFour,isChinese,max100} from '@/utils/rules.js'
    import brandSelect from '@/views/brandSelect'
	export default{ 
		created(){  
		   
        },
		components:{qiniu,brandSelect}, 
		data(){
				return{
					
					rules: {
			          'totalPrice': [require('购车总价格',{ validator: decimalTwo, trigger: "blur"})],
			          'paymentAmount':[require('垫资金额',{validator: decimalTwo, trigger: "blur"})],
			          'earnest':[require('定金金额',{validator: decimalTwo, trigger: "blur"})],
			          'carBrandId':[require(prop('carBrandId'),{trigger:"blur",type:"number"})],
			          'carSubBrandId':[require(prop('carSubBrandId'),{trigger:"blur",type:"number"})],
			          'carSeriesId':[require(prop('carSeriesId'),{trigger:"blur",type:"number"})],
			          'carTypeId':[require(prop('carTypeId'),{trigger:"blur",type:"number"})],
			          'carConfig':[require(prop('carConfig'),{trigger:"blur"})],
			          'amount':[require('汽车数量',{trigger:"blur",type:"number"})],
			          'color':[require('颜色'),{validator: isChinese,trigger:"blur"}],
			          'interestRate':[require('当前利率'),{ validator: max100, trigger: "blur"}],
			          'durationId':[require('借款时长',{trigger:"change",type:"number"})],
			          'supplierPhone':[require('手机号码',{ required:false, validator: phone, trigger: "blur"})]
			         
			        },
					dialogForm:{
						interestRate:"",
                        earnest:"",
						paymentAmount:"",
						totalPrice:"",
						imagUrl:[],
						imagUrl1:[],
						imagUrl2:[],
						imagUrl3:[]
					},
					//省
					selectProvince:[],
					//市
					selectCity:[],


					carOrderDurationList:{},
					formLabelWidth:'170px', 

			        activeName:"1",  
  
			        //七牛图片上传
			        qiniuImage:{
			        	id:"qiniuImage", //图片预览的id   
			        	image_uri:[],    //图片上传的列表  只含有url地址
			        },
			        
			        qiniuImage1:{
			        	id:"qiniuImage1",    
			        	image_uri:[]
			        },
			        
			        qiniuImage2:{
			        	id:"qiniuImage2",    
			        	image_uri:[]
			        },
			        
			        qiniuImage3:{
			        	id:"qiniuImage3",    
			        	image_uri:[]
			        },
			        packJson:{
						maxLength:6,   //最大图片数量
						accept:"",//image/gif,image/jpeg,image/jpg,image/png如果是这些，可以不传此参数
						size:4    //图片大小  单位兆
					},
			        packJson1:{
						maxLength:3,   
						accept:"",
						size:4    
					}
				}
			},props:[
			    'dialogSendData','tableData','carOrderId','isAdd'
			    ]
			,methods:{	
				receiveBrandData(pinpai,zipinpai,chexi,chexing,data){ //依次为 品牌id： 子品牌id:  车系id:  车型id:
					this.$nextTick(()=>{
						this.dialogForm.carBrandId=pinpai;
						this.dialogForm.carSubBrandId=zipinpai;
						this.dialogForm.carSeriesId=chexi;
						this.dialogForm.carTypeId=chexing;
						if (data=="") {
						}else{
							this.dialogForm.specificationName=data.carSpecification;
						}
					})
				},
				returnBack(){
					this.dialogSendData.dialogFormVisible=false; 
				},
				submitConfirmForm(formName){ 
	            	this.$refs[formName].validate((valid) => {
			          if (valid) {
			          	this.submitOrder();
			          } else {
			          	this.$nextTick(()=>{
			          	   setTimeout(()=>{this.$message.warning(document.getElementsByClassName('el-form-item__error')[0].innerText);},200) 
			               return false;
			            })
			          }
			        });
				},
			    
				//获取市 
		    	getCity(){    
		    	  if(this.dialogForm.supplierCityPid != "" && this.dialogForm.supplierCityPid != null){ 
			    	  agentHttp.get('adminApi/admin/dictionary/find_city_new/'+this.dialogForm.supplierCityPid).then((data)=>{
				            if(data.success){  
				            	this.selectCity = data.data;
				            	this.dialogForm.supplierCityNid=this.selectCity[0].nid;
				            } 
				        }) 

					  }else{
					  	this.dialogForm.supplierCityNid=null;
					  	this.selectCity={};
					  }
			  	  
			    }, 
				submitOrder(){	
	                if (this.setImageUrl()) {
						agentHttp.postJson('adminApi/admin/car_order/first_audit_order/temporary_sumbit',this.dialogForm).then((data)=>{
				            if(data.success){  
				            	this.selectCity = data.data;
				            	this.$emit('refreshTableData');
				            	this.dialogSendData.dialogFormVisible=false; 
				            	this.$message.success(data.data||"提交成功");
				            } 
				        }) 
					}
			    },
			    setImageUrl(){
	               	this.dialogForm.contracts=this.qiniuImage.image_uri.join(",");
	               	if(this.dialogForm.contracts.length<1){
	               		this.$message.warning('上游购销合同图片至少一张');
			            return false;
	               	}
	                this.dialogForm.depositPic=this.qiniuImage1.image_uri.join(",");   
	                this.dialogForm.supplierInfoPic=this.qiniuImage2.image_uri.join(",");
	                this.dialogForm.supplierAddressPic=this.qiniuImage3.image_uri.join(",");
	                return true;
	                
			    },
	            FormatTwo(val){
	            	var value=((this.dialogForm[val]||"")-0).toFixed(2);
	            	this.dialogForm[val] = value=='NaN'?"":value;
	                
			    },
			    FormatInterestRate(val){
			    	debugger
	                var value=((this.dialogForm[val]||"")-0);
	                if(value.length>9){
	                	this.$message.warning('利率不能大于100');
	                	this.dialogForm[val] ="0.0000";
	                	return;
	                }
	                this.dialogForm[val] = value=='NaN'?"0.0000":value.toFixed(4);
			    }
			}
       
	};
		 
</script>